<template>
  <div :class="{ 'dark-mode': isDarkMode }">
    <NavBar />
    <router-view />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue';
import NavBar from '@/components/NavBar.vue';

const isDarkMode = ref(false);

const toggleDarkMode = () => {
  isDarkMode.value = !isDarkMode.value;
  document.body.classList.toggle('dark-mode', isDarkMode.value);
};

provide('isDarkMode', isDarkMode);
provide('toggleDarkMode', toggleDarkMode);
</script>

<style>
.dark-mode {
  background-color: #1a1a1a;
  color: #f0f0f0;
}
</style>
